'use client';

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Image from 'next/image';
import MobileLayout from '../../../components/layout/MobileLayout';
import styles from './page.module.css';

interface Activity {
  id: number;
  title: string;
  time: string;
  area: string;
  image: string;
  description?: string;
}

const activityDetails: { [key: string]: Activity } = {
  '1': {
    id: 1,
    title: "温情早餐",
    time: "07:30 至 9:30 开放",
    area: "湖南省长沙市岳麓区彭氏面馆",
    image: "/activities/breakfast.png",
    description: "欢迎来到主题乐园，参加美食街活动。主题乐园拥有1832m²大型室内游玩场所。\n\n主题咖啡厅融合参与性、观赏性、娱乐性、趣味性于一体，绝对的网红打卡圣地。努力打造成为中国最新、最具个性的主题乐园，是主题咖啡度假区的重要组成部分。\n\n主题咖啡厅设有海洋馆、自然天成的山水、巧妙地将多种精彩刺激的高科技游乐设备与地中海风格建筑、惊险刺激的冒险海盗区、神秘诱惑的加勒比海岸等等六大主题区域，各种高科技游乐项目，带你飞跃翱翔。"

  },
  '2': {
    id: 2,
    title: "美食街活动",
    time: "09:30 至 11:00 开放",
    area: "四川省成都市武侯区武侯祠大街231号附1号",
    image: "/activities/food-street.png",
    description: "欢迎来到主题乐园，参加美食街活动。主题乐园拥有1832m²大型室内游玩场所。\n\n主题咖啡厅融合参与性、观赏性、娱乐性、趣味性于一体，绝对的网红打卡圣地。努力打造成为中国最新、最具个性的主题乐园，是主题咖啡度假区的重要组成部分。\n\n主题咖啡厅设有海洋馆、自然天成的山水、巧妙地将多种精彩刺激的高科技游乐设备与地中海风格建筑、惊险刺激的冒险海盗区、神秘诱惑的加勒比海岸等等六大主题区域，各种高科技游乐项目，带你飞跃翱翔。"
  },
  '3': {
    id: 3,
    title: "亲子烘焙",
    time: "13:00 至 17:30 开放",
    area: "南山区东滨路3131-36号兰园大厦一楼",
    image: "/activities/baking.png",
    description: "欢迎来到主题乐园，参加亲子烘焙活动。主题乐园拥有1832m²大型室内游玩场所。\n\n主题咖啡厅融合参与性、观赏性、娱乐性、趣味性于一体，绝对的网红打卡圣地。努力打造成为中国最新、最具个性的主题乐园，是主题咖啡度假区的重要组成部分。\n\n主题咖啡厅设有海洋馆、自然天成的山水、巧妙地将多种精彩刺激的高科技游乐设备与地中海风格建筑、惊险刺激的冒险海盗区、神秘诱惑的加勒比海岸等等六大主题区域，各种高科技游乐项目，带你飞跃翱翔。"
  },
  '4': {
    id: 4,
    title: "欢乐儿童乐园",
    time: "10:00 至 12:00 开放",
    area: "青岛市崂山区沙子口社区崂山路307号",
    image: "/activities/cinema.png",
    description: "欢迎来到主题乐园，参加欢乐儿童乐园活动。主题乐园拥有1832m²大型室内游玩场所。\n\n主题咖啡厅融合参与性、观赏性、娱乐性、趣味性于一体，绝对的网红打卡圣地。努力打造成为中国最新、最具个性的主题乐园，是主题咖啡度假区的重要组成部分。\n\n主题咖啡厅设有海洋馆、自然天成的山水、巧妙地将多种精彩刺激的高科技游乐设备与地中海风格建筑、惊险刺激的冒险海盗区、神秘诱惑的加勒比海岸等等六大主题区域，各种高科技游乐项目，带你飞跃翱翔。"
  },
  '5': {
    id: 5,
    title: "主题电影院",
    time: "12:30 至 14:00 开放",
    area: "江苏省苏州市姑苏区虎池路 1583 号星光耀商业广场 3 幢第 4 层",
    image: "/activities/kids.png",
    description: "欢迎来到主题乐园，参加主题电影院活动。主题乐园拥有1832m²大型室内游玩场所。\n\n主题咖啡厅融合参与性、观赏性、娱乐性、趣味性于一体，绝对的网红打卡圣地。努力打造成为中国最新、最具个性的主题乐园，是主题咖啡度假区的重要组成部分。\n\n主题咖啡厅设有海洋馆、自然天成的山水、巧妙地将多种精彩刺激的高科技游乐设备与地中海风格建筑、惊险刺激的冒险海盗区、神秘诱惑的加勒比海岸等等六大主题区域，各种高科技游乐项目，带你飞跃翱翔。"
  },
  '6': {
    id: 6,
    title: "晚间交友派对",
    time: "19:00 至 22:00 开放",
    area: "河北省保定市唐县国防东路福泰百购三楼",
    image: "/activities/night-party.png",
    description: "欢迎来到主题乐园，参加晚间交友派对活动。主题乐园拥有1832m²大型室内游玩场所。\n\n主题咖啡厅融合参与性、观赏性、娱乐性、趣味性于一体，绝对的网红打卡圣地。努力打造成为中国最新、最具个性的主题乐园，是主题咖啡度假区的重要组成部分。\n\n主题咖啡厅设有海洋馆、自然天成的山水、巧妙地将多种精彩刺激的高科技游乐设备与地中海风格建筑、惊险刺激的冒险海盗区、神秘诱惑的加勒比海岸等等六大主题区域，各种高科技游乐项目，带你飞跃翱翔。"
  }
};

export default function ActivityDetail() {
  const params = useParams();
  const router = useRouter();
  const [activity, setActivity] = useState<Activity | null>(null);
  const [isFavorite, setIsFavorite] = useState(false);

  useEffect(() => {
    // 从URL参数中获取活动ID
    const id = params.id as string;

    // 获取活动详情
    if (id && activityDetails[id]) {
      setActivity(activityDetails[id]);

      // 检查是否已收藏
      const favoritesData = sessionStorage.getItem('favorites');
      if (favoritesData) {
        const favorites = JSON.parse(favoritesData);
        setIsFavorite(favorites.some((fav: any) => fav.id === parseInt(id)));
      }
    } else {
      // 如果没有找到活动，返回活动列表页
      router.push('/activity');
    }
  }, [params.id, router]);

  // 监听收藏状态变化
  useEffect(() => {
    const handleStorageChange = () => {
      const id = params.id as string;
      if (!id) return;

      const favoritesData = sessionStorage.getItem('favorites');
      if (favoritesData) {
        const favorites = JSON.parse(favoritesData);
        setIsFavorite(favorites.some((fav: any) => fav.id === parseInt(id)));
      } else {
        setIsFavorite(false);
      }
    };

    // 添加事件监听器
    window.addEventListener('storage', handleStorageChange);

    // 清理函数
    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, [params.id]);

  // 处理收藏/取消收藏
  const toggleFavorite = () => {
    if (!activity) return;

    const favoritesData = sessionStorage.getItem('favorites');
    const favorites = favoritesData ? JSON.parse(favoritesData) : [];
    const existingIndex = favorites.findIndex((fav: any) => fav.id === activity.id);

    if (existingIndex >= 0) {
      // 如果已经在收藏列表中，则移除
      favorites.splice(existingIndex, 1);
      setIsFavorite(false);
    } else {
      // 如果不在收藏列表中，则添加
      favorites.push({ id: activity.id, day: 0 }); // 使用当前选中的日期
      setIsFavorite(true);
    }

    // 保存到sessionStorage
    sessionStorage.setItem('favorites', JSON.stringify(favorites));

    // 触发storage事件，通知其他页面
    window.dispatchEvent(new Event('storage'));
  };

  // 返回上一页
  const goBack = () => {
    router.back();
  };
  const dian = (address: string) => {
    if (!activity) return;
    console.log('活動詳情：', {
      id: activity.id,
      title: activity.title,
      time: activity.time,
      area: activity.area,
      image: activity.image,
      description: activity.description
    });
    const encodedAddress = encodeURIComponent(address);
    router.push(`/ditu?address=${encodedAddress}`);
  }
  if (!activity) {
    return (
      <MobileLayout>
        <div className={styles.loadingContainer}>
          <div className={styles.loadingText}>加载中...</div>
        </div>
      </MobileLayout>
    );
  }

  return (
    <MobileLayout>
      <div className={styles.detailPage}>
        {/* 顶部导航栏 */}
        <div className={styles.navbar}>
          <div className={styles.backButton} onClick={goBack}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 18L9 12L15 6" stroke="#333" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div className={styles.title}>活动详情</div>
          <div className={styles.favoriteButton} onClick={toggleFavorite}>
            <img
              src={isFavorite ? "/icons/heart-filled.png" : "/icons/heart-outline.png"}
              alt={isFavorite ? "已收藏" : "收藏"}
              width="24"
              height="24"
            />
          </div>
        </div>

        {/* 活动图片 */}
        <div className={styles.activityImage}>
          <Image
            src={activity.image}
            alt={activity.title}
            width={400}
            height={250}
          />
        </div>

        {/* 活动信息 */}
        <div className={styles.activityInfo}>
          <h1 className={styles.activityTitle}>{activity.title}</h1>

          <div className={styles.infoItem}>
            <div className={styles.infoIcon}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M12 6V12L16 14" stroke="#666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <div className={styles.infoText}>{activity.time}</div>
          </div>

          <div className={styles.infoItem} onClick={() => { dian(activity.area) }}>
            <div className={styles.infoIcon}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <div className={styles.infoText}>{activity.area}</div>
          </div>
        </div>

        {/* 活动描述 */}
        <div className={styles.activityDescription}>
          <h2 className={styles.sectionTitle}>活动介绍</h2>
          <p className={styles.descriptionText}>{activity.description}</p>
        </div>

        {/* 底部按钮 */}
        <div className={styles.bottomButton}>
          <button className={styles.joinButton}>立即参加</button>
        </div>
      </div>
    </MobileLayout>
  );
}